// import React, { useRef, useEffect } from 'react';
//
// const Map = () => {
//     const rootRef = useRef(null);
//     let map = null;
//
//     useEffect(() => {
//         const loadData = async () => {
//             map = new AMap.Map(rootRef.current, {
//                 mapStyle: 'amap://styles/519bc5be170415504fe23ba1a632d085',
//                 resizeEnable: true,
//                 zoom: 3
//             });
//
//             // Load administrative district boundaries
//             let polygons = [];
//             var opts = {
//                 subdistrict: 0,
//                 extensions: 'all',
//                 level: 'district'
//             };
//             let district = new AMap.DistrictSearch(opts);
//             district.setExtensions('all');
//             district.search('昆山市', function(status, result) {
//                 map.remove(polygons);
//                 polygons = [];
//                 var bounds = result.districtList[0].boundaries;
//                 if (bounds) {
//                     for (var i = 0, l = bounds.length; i < l; i++) {
//                         var polygon = new AMap.Polygon({
//                             strokeWeight: 5,
//                             path: bounds[i],
//                             fillOpacity: 0.4,
//                             fillColor: '#80d8ff',
//                             strokeColor: '#0091ea'
//                         });
//                         polygons.push(polygon);
//                     }
//                 }
//                 map.add(polygons);
//                 map.setFitView(polygons);
//             });
//         };
//
//         const initChart = () => {
//             // Any initialization logic for charts if needed
//         };
//
//         // Run loadData on component mount
//         loadData();
//         // Run initChart after loadData completes
//         initChart();
//
//         // Cleanup function
//         return () => {
//             if (map != null) {
//                 // Clean up map instance if needed
//                 // map.destroy();
//             }
//         };
//     }, []); // Empty dependency array ensures this effect runs only once on mount
//
//     return <div ref={rootRef} style={{ height: '100%' }}></div>;
// };
//
// export default Map;
